<!--展开状态下二级菜单鼠标悬停显示菜单递归组件-->
<template>
  <div>
   <el-menu
    id="wrapper"
    router
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :background-color="themeColor"
    text-color="#fff"
    active-text-color="#ffd04b"
    ref="hovermenu"
    :collapse="true"
  >
    <!-- 无children -->
    <el-menu-item
      :index="item.path"
      v-for="item in noChildren"
      :key="item.path"
      @click="clickMenu(item)"
    >
      <i :class="'iconfont icon-zhankai1'"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <!-- 有children -->
    <el-submenu
      :index="index + '' + itemA.label"
      v-for="(itemA, index) in hasChildren"
      :key="itemA.label + '' + index"
    >
      <template slot="title">
        <i :class="'iconfont icon-zhankai1'"></i>
        <span slot="title">{{ itemA.label }}</span>
      </template>
      <el-menu-item-group>
        <!-- 使用封装的菜单递归组件 -->
        <ForMenu :menu="itemA.children" id="moreInex"></ForMenu>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
  </div>
</template>

<script>
export default {
  name: "HoverMenu",
  props: ["menu"],
  data() {
    return {};
  },
  computed: {
    themeColor() {
      return this.$store.state.tab.themeColor;
    },
    noChildren() {
      return this.menu.filter(item => !item.children);
    },
    hasChildren() {
      return this.menu.filter(item => item.children);
    }
  },
  methods: {
    clickMenu(item) {
        
        // 设置路由跳转
        // this.$router.push({ name: item.name })
      this.$store.commit("selectMenu", item);
    }
  }
};
</script>

<style lang="scss" scoped>
#wrapper {width: auto;}
// 下拉小三角，改为右侧
.el-submenu /deep/.el-icon-arrow-down:before {
    content: "\e6e0";
}
// 展开小三角，改为下側
.el-submenu.is-opened /deep/.el-icon-arrow-down:before {
    content: "\e6e1";
}

/deep/.el-submenu__title,
/deep/.el-menu-item {
  height: 42px;
  font-size: 14px !important;
  color: #8d97b0 !important;
  font-weight: 500;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 42px;
  // -webkit-background-clip: text;
  vertical-align: middle;
  border-top: 1px solid #303349;
  i {
    color: #8d97b0 !important;
    margin-right: 10px;
    font-size: 14px;
  }
}
/deep/ .el-submenu__title {
  color: #d1d8ec !important;
box-shadow: 0px -1px 0px 0px #27334E;
}
/deep/ .el-menu-item {
  
box-shadow: 0px -1px 0px 0px #303349;
}

// sub的激活后样式
/deep/.el-submenu.is-active > .el-submenu__title {
  border-right: 4px solid #d15230!important;
  border-image:linear-gradient(#EA8A5E, #D15230) 0 100;
  background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 196px;
  min-height: 400px;
}
/deep/.el-menu-item-group__title {
  display: none;
}

/deep/.el-menu-item:hover {
  outline: 0 !important;
  background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
/deep/.el-submenu__title:focus,
/deep/.el-submenu__title:hover {
  outline: 0 !important;
  background: linear-gradient(180deg, #415478 0%, #415073 100%)!important;
}
// item激活背景
.el-menu-item.is-active{
background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
/deep/.el-submenu__title{
  width: auto;
}
// 小图标
/deep/.el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
    display: inline-block;
    position: absolute;
    right: 0;
}

// 二级菜单sub缩进
/deep/.el-menu--collapse>.el-submenu>.el-submenu__title span {
  margin-left:20px

}
// 后面的更深层级菜单不缩进
#moreInex /deep/.el-menu--collapse>.el-submenu>.el-submenu__title span{
  margin-left:0
}

</style>